<style>
    #febs-components-others .layui-card-header {
        font-weight: 600;
    }

    #febs-components-others p {
        margin-bottom: 10px
    }
    #febs-components-others .layui-badge {
        line-height: 20px;
        margin: .25rem .5rem .25rem 0;
    }
    #febs-components-others .alert {
        margin-bottom: .75rem;
    }
</style>
<div class="layui-fluid layui-anim febs-anim" id="febs-components-others" lay-title="其他组件">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">Tag标签</div>
                <div class="layui-card-body">
                    <p>样式一</p>
                    <div>
                        <span class="layui-badge febs-tag-green">febs-tag-green</span>
                        <span class="layui-badge febs-tag-magenta">febs-tag-magenta</span>
                        <span class="layui-badge febs-tag-orange">febs-tag-orange</span>
                        <span class="layui-badge febs-tag-red">febs-tag-red</span>
                        <span class="layui-badge febs-tag-volcano">febs-tag-volcano</span>
                        <span class="layui-badge febs-tag-gold">febs-tag-gold</span>
                        <span class="layui-badge febs-tag-lime">febs-tag-lime</span>
                        <span class="layui-badge febs-tag-cyan">febs-tag-cyan</span>
                        <span class="layui-badge febs-tag-blue">febs-tag-blue</span>
                        <span class="layui-badge febs-tag-geekblue">febs-tag-geekblue</span>
                        <span class="layui-badge febs-tag-purple">febs-tag-purple</span>
                    </div>
                    <p>样式二</p>
                    <div>
                        <span class="layui-badge febs-bg-green">.febs-bg-green</span>
                        <span class="layui-badge febs-bg-magenta">febs-bg-magenta</span>
                        <span class="layui-badge febs-bg-orange">febs-bg-orange</span>
                        <span class="layui-badge febs-bg-red">febs-bg-red</span>
                        <span class="layui-badge febs-bg-volcano">febs-bg-volcano</span>
                        <span class="layui-badge febs-bg-gold">febs-bg-gold</span>
                        <span class="layui-badge febs-bg-lime">febs-bg-lime</span>
                        <span class="layui-badge febs-bg-cyan">febs-bg-cyan</span>
                        <span class="layui-badge febs-bg-blue">febs-bg-blue</span>
                        <span class="layui-badge febs-bg-geekblue">febs-bg-geekblue</span>
                        <span class="layui-badge febs-bg-purple">febs-bg-purple</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12 layui-col-sm12 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">Alert告警提示</div>
                <div class="layui-card-body">
                    <div class="alert">
                        <span class="febs-alert-base febs-alert-success">Success Tips</span>
                    </div>
                    <div class="alert">
                        <span class="febs-alert-base febs-alert-info">Informational Notes</span>
                    </div>
                    <div class="alert">
                        <span class="febs-alert-base febs-alert-warn">Warning Message</span>
                    </div>
                    <div class="alert">
                        <span class="febs-alert-base febs-alert-error">Error Message</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>